<template>
    <div class="continer spaceDetail">
        <!-- 入住企业详情页面 -->
        <div class="jiben">
            <div class="title">企业基本信息:</div>
            <el-form
                :model="jibenList"
                label-width="140px"
                ref="formRef"
                autocomplete="off"
                class="addCompanyForm"
            >
                <table>
                    <tr>
                        <td>
                            <el-form-item label="企业名称 : " prop="name">
                                <el-input :disabled="compDisabled" v-model="jibenList.name" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="营业执照代码 : " prop="code">
                                <el-input :disabled="compDisabled" v-model="jibenList.code" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="公司类型 : " prop="type">
                                <el-input :disabled="compDisabled" v-model="jibenList.type" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="注册资本(万元) : " prop="registered_assets">
                                <el-input :disabled="compDisabled" v-model="jibenList.registered_assets" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="所属行业 : " prop="industry">
                                <el-input :disabled="compDisabled" v-model="jibenList.industry" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="注册时间 : " prop="register_time">
                                <el-input :disabled="compDisabled" v-model="jibenList.register_time" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="注册地址 : " prop="addr">
                                <el-input type="textarea" :disabled="compDisabled" autosize v-model="jibenList.addr" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="办公行政区域 : " prop="area">
                                <el-input :disabled="compDisabled" v-model="jibenList.area" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="园区 : " prop="zone">
                                <el-input :disabled="compDisabled" v-model="jibenList.zone" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="法定代表人 : " prop="linkman">
                                <el-input :disabled="compDisabled" v-model="jibenList.law_person" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="联系电话 : " prop="tel">
                                <el-input :disabled="compDisabled" v-model="jibenList.tel" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="传真 : " prop="fax">
                                <el-input :disabled="compDisabled" v-model="jibenList.fax" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="email : " prop="email">
                                <el-input :disabled="compDisabled" v-model="jibenList.email" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="状态 : " prop="status">
                                <el-input :disabled="compDisabled" v-model="jibenList.status" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="联系人: " prop="reason">
                                <el-input :disabled="compDisabled" v-model="jibenList.linkman" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="用户 : " prop="user_id">
                                <el-input :disabled="compDisabled" v-model="jibenList.user_id" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="数据创建时间 : " prop="create_time">
                                <el-input :disabled="compDisabled" v-model="jibenList.create_time" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="数据更新时间 : " prop="update_time">
                                <el-input :disabled="compDisabled" v-model="jibenList.update_time" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="回复时间 : " prop="reply_time">
                                <el-input :disabled="compDisabled" v-model="jibenList.reply_time" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="回复状态 : " prop="reply_status">
                                <el-input :disabled="compDisabled" v-model="jibenList.reply_status" style="min-width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
        </div>
        <!-- <div class="editDetail">
            <el-button class="editBtn" v-if="closeBtn" type="primary" @click="editDetail">修改信息</el-button>
            <el-button class="editBtn" v-else type="primary" @click="quedDetail">确认修改</el-button>
        </div> -->
        <!-- 企业员工信息 -->
        <div class="jiben qita">
            <div class="title">企业员工信息:</div>
            <div>
                <!-- <div v-for="(item, index) in ygList" :key="index">
                    <div>{{item.name}}</div>
                </div> -->

                <el-table v-if="ygList.length" v-loading="tableload" :data="ygList" row-key="id" style="width:85%; margin: 0 auto; text-align: center;" border stripe>
                    <el-table-column label="id" prop="id"></el-table-column>
                    <el-table-column label="员工姓名" prop="worker"></el-table-column>
                    <el-table-column label="性别" prop="gender"></el-table-column>
                    <el-table-column label="部门" prop="department"></el-table-column>
                    <el-table-column label="职位" prop="job"></el-table-column>
                    <el-table-column label="身份证号" prop="id_num"></el-table-column>
                    <el-table-column label="联系方式" prop="tel"></el-table-column>
                    <el-table-column label="状态" prop="status"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 企业其他信息 -->
        <div class="jiben qita">
            <div class="title">企业其他信息:</div>
            <div class="qitaImageDiv">
                <!-- <div v-for="(item, index) in qitaList" :key="index" @mouseover="qitaLiOver(index)" @mouseout="qitaLiOut(index)"> -->
                <div v-for="(item, index) in qitaList" :key="index">
                    <div v-if="item.file.length">
                        <div class="qitaImg" v-if="item.file.slice(item.file.length-4) == '.pdf'" style="text-align: center; line-height: 100px; position: relative;">
                            <iframe style="width: 100%; height: 100%;" :src="BASE_URL + '/' + item.file"></iframe>
                            <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0);">
                                <a style="width: 100%; height: 100%; display: block;" :href="BASE_URL + '/' + item.file"></a>
                            </div>
                        </div>
                        <div class="qitaImg" v-if="item.file.slice(item.file.length-4) == 'xlsx'" style="text-align: center; line-height: 100px; position: relative;">
                           <div style="line-height: 300px; text-align: center; width: 100%;">
                                <a :href="BASE_URL + '/' + item.file" target="_blank" title="下载">{{item.title}}.xlsx</a>
                            </div>
                        </div>
                        <div class="qitaImg" v-if="item.file.slice(item.file.length-4) != '.pdf' && item.file.slice(item.file.length-4) != 'xlsx'" @click="fangda(item)">
                            <img :src="BASE_URL + '/' + item.file" />
                        </div>
                    </div>
                    <div class="qitaImg" v-if="item.file.length == 0" @click="fangda(item)">
                        <div style="line-height: 300px; text-align: center;">无图片或pdf文件</div>
                    </div>
                    <div class="qitaTitle">{{item.title}}</div>
                    <div class="closeQita" @click="deleteQitaLi(item)">×</div>
                </div>
            </div>
        </div>
        <div class="closeDetail">
            <el-button type="primary" @click="closeDetail">返 回</el-button>
        </div>
        <!-- 放大证书 -->
        <el-dialog :title="imgList.title" :visible.sync="imgFlag" width="85%">
            <div style="width: 80%; margin: 0 auto; overflow: hidden; padding-bottom: 40px;">
                <div style='line-height: 20px;' v-if="imgList.code">编号：{{imgList.code}}</div>
                <div style='line-height: 20px;' v-if="imgList.time">获取时间：{{imgList.time}}</div>
                <img v-if="imgList.src" :src="BASE_URL + '/' + imgList.src" style="width: 100%;" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {BASE_URL} from "../../../config/app.js";
    import industry from "../../../api/json/industry.json";
    import { getZhengshuList, getCompany, getWorkers } from "../../../api/spaceManagement/index.js";
    export default {
        name: "companyDetail",
        data() {
            return {
                account: '',
                jibenList: {},
                ygList: [],
                qitaList: [],
                tableload:false,
                // 企业类型
                gsTypes:[
                    {value:"1",label:"合资"},
                    {value:"2",label:"独资"},
                    {value:"3",label:"国有"},
                    {value:"4",label:"私营"},
                    {value:"5",label:"全民所有制"},
                    {value:"6",label:"集体所有制"},
                    {value:"7",label:"股份制"},
                    {value:"8",label:"有限责任"},
                    {value:"9",label:"事业单位"}
                ],
                compDisabled: true,
                closeBtn: true,
                BASE_URL: '',
                imgFlag: false,
                imgList: {}
            };
        },
        methods: {
            // 关闭按钮
            closeDetail(){
                window.history.back(-1); // 返回上一页
                localStorage.removeItem("account");
            },
            // 获取企业基本信息
            getCompanyData(){
                getCompany({account: this.account}).then((response) => {
                    if(response.code == 0){
                        let dataList = response.data.list;
                        for(let i = 0; i < dataList.length; i++){
                            if(dataList[i].id == this.$route.query.id){
                                this.jibenList = dataList[i];
                            }
                        }
                        this.getLeixing();
                        this.getYGXX();
                        this.getZSlist();
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.error("数据获取失败");
                })
            },
            // 获取公司类型 所属行业
            getLeixing(){
                for(let i = 0; i < industry.length; i++){
                    for(let j = 0; j < industry[i].children.length; j++){
                        for(let n = 0; n < industry[i].children[j].children.length; n++){
                            if(this.jibenList.industry == industry[i].children[j].children[n].value){
                                this.jibenList.industry = industry[i].children[j].children[n].label;
                            }
                        }
                    }
                }
                for(var m = 0; m < this.gsTypes.length; m++){
                    if(this.jibenList.type == this.gsTypes[m].value){
                        this.jibenList.type = this.gsTypes[m].label;
                    }
                }
            },
            // 获取员工信息
            getYGXX(){
                getWorkers({
                    company_id: this.jibenList.id
                }).then((response) => {
                    if(response.code == 0){
                        this.ygList = response.data;
                        for(var i = 0; i < response.data.length; i++){
                            if(response.data[i].status == 1){
                                this.ygList[i].status = '在职';
                            }else if(response.data[i].status == 0){
                                this.ygList[i].status = '离职';
                            }
                            if(response.data[i].gender == 1){
                                this.ygList[i].gender = '男';
                            }else if(response.data[i].gender == 2){
                                this.ygList[i].gender = '女';
                            }else{
                                this.ygList[i].gender = '保密';
                            }
                        }
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.error("企业其他信息数据获取失败");
                })
            },
            // 获取证书列表
            getZSlist(){
                getZhengshuList({
                    company_id: this.jibenList.id
                }).then((response) => {
                    if(response.code == 0){
                        this.qitaList = response.data;
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.error("企业其他信息数据获取失败");
                })
            },
            // 修改
            editDetail(){
                this.compDisabled = false;
                this.closeBtn = false;
            },
            // 确定修改
            quedDetail(){
                this.$confirm("是否确定修改", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    this.closeBtn = true;
                    this.compDisabled = true;
                }).catch(()=>{
                    this.$message.info("取消修改");
                    this.closeBtn = true;
                    this.compDisabled = true;
                });
            },
            qitaLiOver(index){
                document.getElementsByClassName("closeQita")[index].style.display = "block";
            },
            qitaLiOut(index){
                document.getElementsByClassName("closeQita")[index].style.display = "none";
            },
            deleteQitaLi(index){
                this.$confirm("是否确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    console.log("删除", index);
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            },
            fangda(item){
                this.imgFlag = true;
                this.imgList = {
                    src: item.file,
                    title: item.title,
                    code: item.code,
                    time: item.start_time.substr(0,11)
                }
            }
        },
        created() {
            this.BASE_URL = BASE_URL;
            this.account = window.localStorage.getItem("account");
            this.getCompanyData();
        }
    };
</script>

<style scoped>
.spaceDetail{
    color: #000000;
}
.detailImg{
    width: 1200px;
    height: 480px;
    margin: 0 auto;
}
.detailImgTitle{
    text-align: center;
    margin: 30px 0;
}
.detailImg img{
    width: 100%;
}
.detailText{
    width: 1200px;
    margin: 0 auto;
}
.closeDetail{
    float: right;
    margin-right: 50px;
    margin-top: 30px;
}
.title{
    margin-bottom: 20px;
    font-size: 20px;
}
.jiben table{
    margin: 0 auto;
}
.jiben table td{
    height: 50px;
    text-align: center;
}
.jiben table td:nth-child(1), .jiben table td:nth-child(3){
    width: 200px;
}
.jiben table td:nth-child(2), .jiben table td:nth-child(4){
    padding: 0 50px;
}
.el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{
    color: #606266;
}
.editDetail{
    height: 50px;
}
.editDetail .editBtn{
    float: right;
    margin-right: 50px;
}
/* 企业其他信息 */
.qita{
    overflow: hidden;
    padding: 0 10px 30px 10px;
}
.qitaImageDiv{
    width: 90%;
    margin: 0 auto;
}
.qitaImageDiv>div{
    width: 23.5%;
    float: left;
    margin-right: 1.5%;
    margin-top: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    position: relative;
}
.qitaImageDiv>div:nth-child(4){
    margin-right: 0 !important;
}
.qitaImg{
    width: 85%;
    height: 300px;
    margin: 20px auto;
    border: 1px solid #000066;
}
.qitaImg img{
    width: 100%;
    height: 100%;
}
.qitaTitle{
    text-align: center;
    margin: 20px 0;
    line-height: 22px;
}
.closeQita{
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    position: absolute;
    top: 6px;
    right: 2%;
    text-align: center;
    border: 1px solid #AAAAAA;
    border-radius: 50%;
    cursor: pointer;
    display: none;
}

.cell{
    text-align: center !important;
}
</style>
